<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="topTitle">
						通勤车
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="topView" >
			<view class="title">
				通勤车签到
			</view>
			<view class="content flex-column-center">
				<view class="title1">
					沙口路-中原万达
				</view>
				<view @click="buttonClick()" class="daka flex-column-center">
					<view class="title2">
						签到
					</view>
					<view class="time">
						{{currentTime}}
					</view>
				</view>
				<view class="address flex-row-center" style="margin-bottom: 60rpx;">
					<uni-icons type="checkbox-filled" color="#52B45D" size="20"></uni-icons>
					<text style="margin-left: 6rpx;">{{address}}</text>
					
					<text @click="getLocation()" style="color: #588DFF;margin-left: 20rpx;">刷新</text>
				</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		sign,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				address:'',
				timer:null,
				currentTime: '',
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			this.getLocation()
		},
		onLoad(e) {
			// this.loadData()
			this.updateTime(); // 初始化时间显示
			    this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		// beforeDestroy() {
  //   clearInterval(this.timer); // 清除定时器
  // },
		methods: {
			locationRequest(lat,lng){
				var latLng=lat+','+lng
				uni.request({
				    url: 'https://apis.map.qq.com/ws/geocoder/v1/?key=3U7BZ-EHTC5-DYHIN-IEEUQ-PP7Y3-AGF3L&location='+latLng, 
				    data: {
				        
				    },
				    header: {
				       
				    },
				    success: (res) => {
						
			console.log(res.data.result.address)
						this.address=res.data.result.address
						
				    }
				});
			},
			
			getLocation(){
				var that=this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.locationRequest(res.latitude,res.longitude)
					}
				});
			},
			buttonClick(){
				var data = {
					car_id:2,
					sign_address:'测试地址'
				}
				sign(data).then(res => {
					this.showToast('签到成功')
				})
			},
			 updateTime() {
			      const now = new Date();
			      const hours = now.getHours().toString().padStart(2, '0'); // 补齐为两位数
			      const minutes = now.getMinutes().toString().padStart(2, '0'); // 补齐为两位数
			      const seconds = now.getSeconds().toString().padStart(2, '0'); // 补齐为两位数
			      this.currentTime = `${hours}:${minutes}:${seconds}`;
			    },
			loadData() {

				var data = {
					id: this.id
				}
				forum_list(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
	
	.title {
		margin-top: 80rpx;
		
		text-align: center;
		font-weight: 800;
		font-size: 48rpx;
		line-height: 48rpx;
		font-style: normal;
		text-transform: none;
		color: #163886;
		// background: linear-gradient(90deg, #163886 0%, #00133E 76%);
	}
	.content{
		padding: 80rpx 0;
		margin: 30rpx;
		margin-top: 50rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.title1{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.daka{
		margin-top: 180rpx;
		margin-bottom: 40rpx;
		width: 272rpx;
		height: 272rpx;
		background: linear-gradient( 180deg, #4192F7 0%, #2D6AF6 100%);
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(55,122,227,0.4);
		border-radius:50%;
	}
	.title2{
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.time{
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #8EBCFA;
	}
	.address{
		width: 100%;
		font-weight: 500;
		font-size: 28rpx;
		color: #7C8187;
	}
</style>